<template>
  <div class="container">范方方
    <el-card>
      <search-tools @clear="clear" @search="search" />
      <!-- 警告 -->
      <el-alert type="info" :closable="false" show-icon>
        <template slot="title">数据一共{{ counts }}条</template>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" stripe>
        <el-table-column prop="number" label="试题编号"> </el-table-column>
        <el-table-column prop="subject" label="学科">
        </el-table-column>
        <el-table-column prop="catalog" label="目录">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80" :formatter="formatQuestion">
        </el-table-column>
        <el-table-column prop="question" label="题干" width="160">
          <template v-slot="{ row }"><span v-html="row.question"></span></template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80" :formatter="formatDifficulty">
        </el-table-column>
        <el-table-column prop="creator" label="录入人">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="{ row }">
            <!-- 预览 -->
            <el-tooltip class="item" effect="light" content="预览" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-view" circle plain size="small" @click="showViewDialog(row)">
              </el-button>
            </el-tooltip>
            <!-- 编辑 -->
            <el-tooltip class="item" effect="light" content="编辑" placement="top" :enterable="false">
              <el-button type="success" icon="el-icon-edit" circle plain size="small" @click="edit(row)"></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip class="item" effect="light" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" circle plain size="small" @click="del(row)"></el-button>
            </el-tooltip>
            <!-- 加入精选 -->
            <el-tooltip class="item" effect="light" content="加入精选" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-check" circle plain size="small" @click="addChoice(row)">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.page"
          :page-sizes="[10, 15, 20, 30]" :page-size="query.pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="counts">
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 预览对话框组件 -->
    <questions-preview :show-dialog.sync="showDialog" :question-views="questionViews" />
  </div>
</template>

<script>
import searchTools from '../components/search-tools.vue'
import { list, detail, remove, choiceAdd } from '../../api/hmmm/questions'
import { questionType, difficulty } from '../../api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview.vue'

export default {
  components: { searchTools, QuestionsPreview },
  data () {
    return {
      // 基础题库列表
      tableData: [],
      // 数据总条数
      counts: 0,
      // 请求参数
      query: {
        page: 1,
        pagesize: 10
      },
      // 预览对话框的显示与隐藏
      showDialog: false,
      questionViews: {}
    }
  },
  created () {
    this.getList()
  },
  watch: {
    counts () {
      if (this.counts === (this.query.page - 1) * this.query.pagesize && this.counts !== 0) { // 这一行是关键代码，倍数关系
        this.query.page -= 1
        this.getList()// 获取表格数据的方法
      }
    }
  },
  methods: {
    // 获取组题列表
    async getList () {
      const { data: res } = await list(this.query)
      console.log(res)
      this.tableData = res.items
      this.counts = res.counts
    },
    // 监听分页条页码改变事件 并重新拉取数据
    handleCurrentChange (newPage) {
      // newPage是当前点击的页码
      this.query.page = newPage // 将当前页码赋值给当前的最新页码
      this.getList()
    },
    // 监听分页条每页条数改变事件
    handleSizeChange (newSize) {
      this.query.pagesize = newSize // 将当前每页条数赋值给当前的最新每页条数
      this.getList()
    },
    // 格式化题型
    formatQuestion (row, column, cellValue, index) {
      // 要去找单元格内容所对应的值
      const obj = questionType.find((item) => item.value + '' === cellValue)
      return obj ? obj.label : '未知'
    },
    // 格式化难度
    formatDifficulty (row, column, cellValue, index) {
      // 要去找单元格内容所对应的值
      const obj = difficulty.find((item) => item.value + '' === cellValue)
      return obj ? obj.label : '未知'
    },
    // 点击删除基础题目
    del (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row) // 发请求
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击显示预览题目对话框
    async showViewDialog (row) {
      const { data: res } = await detail(row)
      console.log(res)
      this.questionViews = res
      this.showDialog = true
    },
    // 点击加入精选
    async addChoice (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await choiceAdd(row) // 发请求
          await remove(row)
          this.getList()
          this.$message({
            type: 'success',
            message: '加入成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入'
          })
        })
    },
    // 点击清除搜索表单，重新获取表格数据
    clear () {
      this.getList()
    },
    // 点击搜索，接收子组件传来的参数发请求
    async search (val) {
      console.log(val)
      const { data: res } = await list({ ...this.query, ...val })
      console.log(res)
      this.tableData = res.items
      this.counts = res.counts
    },
    // 点击编辑基础题目
    edit (row) {
      this.$router.push({ path: '/questions/new', query: { id: row.id } })
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 10px;
}
.el-table {
  margin: 15px 0;
}
</style>
